<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script id="muban1">
	/*<style>div{border:1px solid gray;}h1{color:blue}p{}</style>
<div>
<h1>{a}</h1>
<p>[b]</p>
</div>
	 */
</script>
<script>
//定义模版
//var html = "<style>div{border:1px solid gray;}h1{color:blue}p{}</style><div><h1>{a}</h1><p>[b</p></div>";	
var html = muban1.innerHTML.replace("/*","").replace("*/","")
</script>
</head>
<body>
	

<script id="muban1" type="text/html">
	{{if c>10}}
		<h1>{{title}}</h1>
		<p>{{content}}</p>
	{{else if d<5 }}
		<ul>
			{{each arr as v ind}}
				<li>{{v+" "+ind}}</li>
			{{/each}}
		</ul>
	{{else}}
		<ul>
			{{each obj as v ind}}
				<li>{{v+" "+ind}}</li>
			{{/each}}
		</ul>
	{{/if}}
</script>
<script id="muban1" type="text/html">
	{{if c>10}}
		<h1>{{title}}</h1>
		<p>{{content}}</p>
	{{else if d<5 }}
		<ul>
			{{each arr as v ind}}
				<li>{{v+" "+ind}}</li>
			{{/each}}
		</ul>
	{{else}}
		<ul>
			{{each obj as v ind}}
				<li>{{v+" "+ind}}</li>
			{{/each}}
		</ul>
	{{/if}}
</script>
<script id="muban1" type="text/html">
	{{if c>10}}
		<h1>{{title}}</h1>
		<p>{{content}}</p>
	{{else if d<5 }}
		<ul>
			{{each arr as v ind}}
				<li>{{v+" "+ind}}</li>
			{{/each}}
		</ul>
	{{else}}
		<ul>
			{{each obj as v ind}}
				<li>{{v+" "+ind}}</li>
			{{/each}}
		</ul>
	{{/if}}
</script>

<script>
//模拟数据
var arr = [
	{"title":"天气不错", "content":"气温40度<br>小心着凉"},
	{"title":"静夜思", "content":"床前明月光<br>疑是地上霜"}
]
//在url中获取参数
var index = query("index");
var obj = arr[index];

function query(name){
	var str = location.search;
	if( str.length > 0 ){
		str = str.substr(1);
		var arr = str.split("&");
		for(var i=0,l=arr.length; i<l; i++){
			var col = arr[i].split("=");
			if( col[0] == name ){
				return col[1];
			}
		}
		return "";
	}else{
		return "";
	}
}
//使用模版
html = html.replace("{a}", obj.title);
html = html.replace("[b", obj.content);
document.write(html);
</script>
</body>
</html>
